<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
        </div>
        <nly-content>
             <div class="detail-box">
                    <div class="detail-header">
                        <sapn v-if="data.status===0">未支付</sapn>
                        <sapn v-else-if="data.status===1">处理中</sapn>
                        <sapn v-else-if="data.status===2">已取消</sapn> 
                        <sapn v-else-if="data.status===3">交易成功</sapn>    
                        <sapn v-else-if="data.status===4">已过期</sapn> 
                        <sapn v-else-if="data.status===400">已废弃</sapn>              
                        实付金额：<span>{{data.orderAmount}} 元</span>
                    </div>
                    <div class="detail-content">
                        <a-row>
                            <a-col :span="12" class="detail-item">
                                <sapn class="detail-title">订单号</sapn>
                                <sapn class="detail-text">{{data.businessOrderNo}}</sapn>
                            </a-col>
                            <a-col :span="12" class="detail-item">
                                <sapn class="detail-title">订单类型</sapn>
                                <sapn class="detail-text">
                                    <sapn v-if="data.orderType===1">新购</sapn>
                                    <sapn v-else-if="data.orderType===2">续费</sapn> 
                                    <sapn v-else-if="data.orderType===3">变更</sapn>    
                                </sapn>
                            </a-col>
                            <a-col :span="12" class="detail-item">
                                <sapn class="detail-title">订单创建人</sapn>
                                <sapn class="detail-text">{{data.createUserName}}</sapn>
                            </a-col>
                            <a-col :span="12" class="detail-item">
                                <sapn class="detail-title">创建时间</sapn>
                                <sapn class="detail-text">{{data.createTime}}</sapn>
                            </a-col>
                            <a-col :span="12" class="detail-item">
                                <sapn class="detail-title">订单付款人</sapn>
                                <sapn class="detail-text">{{data.payUserName}}</sapn>
                            </a-col>
                            <a-col :span="12" class="detail-item">
                                <sapn class="detail-title">付款时间</sapn>
                                <sapn class="detail-text">{{data.payTime}}</sapn>
                            </a-col>
                        </a-row>
                    </div>
                     <div class="detail-content border-t-95">
                        <a-descriptions title="订单信息" layout="vertical" bordered :column="{ xxl: 6, xl: 6, lg: 6, md: 5, sm: 4, xs: 3 }">
                            <a-descriptions-item label="产品">
                            {{productionType}}
                            </a-descriptions-item>
                            <a-descriptions-item label="子产品名称">
                            {{data.productionName}}
                            </a-descriptions-item>
                            <a-descriptions-item label="资源类型">
                            {{paymentType}}
                            </a-descriptions-item>
                            <a-descriptions-item label="单价(元)">
                            {{data.price}}
                            </a-descriptions-item>
                            <a-descriptions-item label="数量">
                            {{data.timeNumber}}
                            </a-descriptions-item>
                            <a-descriptions-item label="订单金额" :span="3">
                            {{data.orderAmount}}
                            </a-descriptions-item>
                            <a-descriptions-item label="规格">
                                <div v-html="productionSpecificationsHtml"></div>
                            </a-descriptions-item>
                        </a-descriptions>
                    </div>
                </div>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { getByCrmGoodsOrderId} from "@/api/expenses/businessOrder";


export default {
    data () {
        return {
            orderId:null,
            data:{},
        };
    },
    created(){
        this.detail();
    },
    mounted(){

    },
    activated(){
        this.initPage();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        productionType:function(){
            let { productionType } = this.data;
             let showText = "";
            switch(productionType){
                case "baseProduction":showText = "基础产品";break;
                case "callSetting":showText = "外呼套餐";break;
                case "callAgent":showText = "外呼坐席";break;
            }
            return showText;
        },
        paymentType:function(){
            let { paymentType } = this.data;
            let showText = "";
            switch(paymentType){
                case 1:showText = "包年";break;
                case 2:showText = "包月";break;
                case 3:showText = "一次性";break;
            }
            return showText;
        },
        productionSpecificationsHtml:function(){
            let { productionType ,productionSpecifications} = this.data;
            let showHtml = null;
            if(!productionSpecifications)return showHtml;
            let jsonData = JSON.parse(productionSpecifications);
            switch(productionType){
                case "baseProduction":
                    
                    break;
                case "callSetting":
                    showHtml =  `<div>
                                    <p>套餐名称：${jsonData.name}</p>
                                    <p>月低费：${jsonData.baseCharges} 元</p>
                                    <p>固定分钟数：${jsonData.baseMinutes} 分钟</p>
                                    <p>超出分钟数费率：${jsonData.price} 元/分钟</p>
                                </div>`;    
                    break;
                case "callAgent":
                    showHtml =  `<div>
                                    <p>坐席单价：${jsonData.price} 元/年</p>
                                    <p>坐席个数：${jsonData.number} 个</p>
                                </div>`;
                    break;
            }
            return showHtml;
        }
    },
    watch: {
    },
    methods: {
       //初始化 
        initPage(){
            let orderId = this.$route.params.orderId;
            Object.assign(this,{orderId})
            this.reLoadData();
        },
        reLoadData(){
            this.detail();
        },
        //获取订单详情
        detail () {
            const { orderId } = this;
            if(!orderId)return;
            getByCrmGoodsOrderId({orderId}).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    this.data = data;
                }
            }).catch(error => { });
        },
    }
};
</script>
<style lang="less" scoped>
    /deep/.ant-descriptions-item-label {
    background-color: #dbdbdb !important;
    }
    .border-t-95{
        border-top: 1px solid #e8e8e8; 
    }
  .detail-box{
        border: 1px solid #e8e8e8;
        background: #fff;
        border-radius: 2px;
        position: relative;
        box-sizing: border-box;
        color: rgba(0,0,0,.65);
        line-height: 1.5;
        font-size: 14px;
        margin-top:-5px;
        margin: 0px 10% 10px 10%;
        .detail-header{
            padding: 14.5px 24px;
            // background: #f2f3f5;
            border-bottom: 1px solid #e8e8e8;
            color: rgba(0,0,0,.85);
            min-height: 40px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 2px 2px 0 0;
        }
        .detail-content{
            padding: 8px 24px 3px 24px;
            .detail-item{
                margin-bottom: 5px;
                .detail-title{
                    display: inline-block;
                    width: 120px;
                    margin-right: 8px;
                    color: #7b7979;
                }
                .detail-text{
                    color: #333 !important;
                }
            }
        }
    }
</style>